<template>
    <view class="content">
        <hx-navbar :config="config" />
        <view class="server-order">
            <input v-model="order_number" placeholder="请输入订单号" @confirm="handleSearch" />
            <image src="/static/sousuo.png" class="server-image" @click="handleSearch"></image>
        </view>
        <view class="order-add" @click="addorder" v-if="role_id == 2">
            <image src="/static/addorder.png"></image>
        </view>
        <view class="list" v-if="list && list.length > 0">
            <view class="list-box" v-for="(item,index) in list" :key="index">
                <view class="order-number">
                    {{item.order_number}}
                </view>
                <view class="order-line"></view>
                <view class="order-content">
                    <view class="order-box">
                        <view class="order-box-cont">
                            <view>合同签订：</view>
                            <view>{{item.signing_name}}</view>
                        </view>
                        <view class="order-box-cont">
                            <view>客户名称：</view>
                            <view>{{item.customer_name}}</view>
                        </view>
                        <view class="order-box-cont">
                            <view>订单状态：</view>
                            <view>{{getStatusText(item.status)}}</view>
                        </view>
                    </view>
                    <view class="order-box">
                        <view class="order-box-cont">
                            <view>签订时间：</view>
                            <view>{{item.signing_time}}</view>
                        </view>
                        <view class="order-box-cont">
                            <view>交付时间：</view>
                            <view>{{item.delivery_time}}</view>
                        </view>
                        <view class="order-box-cont">
                            <view>创建时间：</view>
                            <view>{{item.create_time}}</view>
                        </view>
                    </view>
                </view>

                <view class="order-option">
                    <view class="order-btn order-btn-complete" @click="clickView(item.id,'addOrderProduct')"
                        v-if="(item.status == 1 || item.status == 2 || item.status == 3) && role_id == 2">
                        新增交付内容
                    </view>
                    <view class="order-btn order-btn-complete" @click="editOrderContract(item.id)"
                        v-if="(item.order_type == 2) && role_id == 2">
                        上传正式合同
                    </view>
                    <view class="order-btn order-btn-edit" @click="editOrder(item.id)"
                        v-if="(item.status == 1 || item.status == 2 || item.status == 3) && role_id == 2">
                        编辑
                    </view>
                    <view class="order-btn order-btn-complete" @click="goConfirm(item.id)"
                        v-if="item.status == 1 && role_id == 3">
                        去确认
                    </view>
                    <view class="order-btn order-btn-complete" @click="suppliesListCheckSub(item.id)"
                        v-if="item.status == 3 && role_id == 4 && admin_id == item.review_design_id">
                        设计复审
                    </view>
                    <view class="order-btn order-btn-complete" @click="procurementComplete(item.id,'procurement')"
                        v-if="item.status == 4 &&  role_id == 5">
                        采购完成
                    </view>
                    <view class="order-btn order-btn-edit" @click="clickView(item.id,'procurement')"
                        v-if="item.status == 4 &&  role_id == 5">
                        采购
                    </view>
                    <view class="order-btn order-btn-complete"
                        @click="materialWareHousingComplete(item.id,'materialWareHousing')"
                        v-if="item.status == 5 &&  role_id == 6">
                        完成物料入库
                    </view>
                    <view class="order-btn order-btn-edit" @click="clickView(item.id,'materialWareHousing')"
                        v-if="item.status == 5 &&  role_id == 6">
                        物料入库
                    </view>

                    <view class="order-btn order-btn-complete" @click="popshowShow(item.id)"
                        v-if="item.status == 6 &&  role_id == 7">
                        预计完成时间
                    </view>

                    <view class="order-btn order-btn-complete" @click="productionProgressComplete(item.id)"
                        v-if="item.status >= 7 &&  role_id == 7 && item.sub_quality_inspection_data == 2">
                        生产资料上传完成
                    </view>
                    <view class="order-btn order-btn-edit" @click="clickView(item.id,'productionProgress')"
                        v-if="item.status >= 7 &&  role_id == 7 && item.sub_quality_inspection_data == 2">
                        生产资料上传
                    </view>

                    <view class="order-btn order-btn-complete" @click="productionQualifiedComplete(item.id)"
                        v-if="item.status >= 8 &&  role_id == 8 && item.sub_qualified_qualified_data == 2">
                        质检资料上传完成
                    </view>

                    <view class="order-btn order-btn-edit" @click="clickView(item.id,'productionQualified')"
                        v-if="item.status >= 8 &&  role_id == 8 && item.sub_qualified_qualified_data == 2">
                        质检资料上传
                    </view>
                    <view class="order-btn order-btn-complete" @click="shipmentComplete(item.id)"
                        v-if="item.status == 9 &&  role_id == 9 && item.sub_shipment_data == 2">
                        完成发货
                    </view>
                    <view class="order-btn order-btn-edit" @click="clickView(item.id,'shipment')"
                        v-if="item.status == 9 &&  role_id == 9">
                        发货
                    </view>
                    <view class="order-btn order-btn-complete" @click="shipmentReceiptView(item.id)"
                        v-if="item.status == 10 &&  role_id == 9 && item.sub_shipment_receipt_data == 2">
                        回单
                    </view>
                    <view class="order-btn order-btn-check" @click="orderDetail(item.id)">
                        查看
                    </view>
                </view>
            </view>

            <!-- 加载中提示 -->
            <view class="loading" v-if="loading">
                <text>加载中...</text>
            </view>

            <!-- 没有更多数据提示 -->
            <view class="no-more" v-if="!hasMore && !loading && list.length > 0">
                <text>没有更多数据了</text>
            </view>
        </view>
        <view class="nolist" v-else>
            <image src="/static/nolist.png"></image>
            <text>暂无数据</text>
        </view>
        <l-popup :radius="20" :show="popshow">
            <view class="pop-box">
                <view style="display: flex;">
                    <view style="font-size: 24rpx;">完成时间：</view>
                    <view style="border-bottom: 1rpx solid #f1f1f1 ;">
                        <picker mode="date" @change="bindDateChange">
                            <view style="width: 100%;font-size: 24rpx;" v-if="estimated_completion_time">
                                {{estimated_completion_time}}
                            </view>
                            <view v-else style="color: #999;width: 100%;font-size: 24rpx;">请选择完成时间</view>
                        </picker>
                    </view>
                </view>
                <view style="display: flex;margin-top: 50rpx;">
                    <view class="popup-click" @click="progressTimeComplete">
                        确定
                    </view>
                    <view class="popup-close" @click="popshowClose">
                        取消
                    </view>
                </view>
            </view>
        </l-popup>

        <l-popup :radius="20" :show="goConfirmshow">
            <view class="pop-box">
                <view style="display: flex;font-size: 24rpx;">
                    <view>产品类型：</view>
                    <view>
                        <radio-group @change="radioChange" style="display: flex;">
                            <label v-for="(item, index) in options" :key="item.value">
                                <view style="display: flex;align-items: center;margin-right: 40rpx;">
                                    <radio style="transform:scale(0.7)" :value="item.value" :checked="item.checked" />
                                    <view>{{item.name}}</view>
                                </view>
                            </label>
                        </radio-group>
                    </view>
                </view>
                <view style="display: flex;font-size: 24rpx;margin-top: 30rpx;">
                    <view>设计人员：</view>
                    <view style="width: 40%;border-bottom: 1rpx solid #f1f1f1;">
                        <picker mode="selector" :range="designerList" range-key="name" @change="onSelectedChange">
                            <view>{{ designer_name ? designer_name : '请选择' }}</view>
                        </picker>
                    </view>
                </view>
                <view style="display: flex;margin-top: 50rpx;">
                    <view class="popup-click" @click="goConfirmSub">
                        确定
                    </view>
                    <view class="popup-close" @click="goConfirmSubClose">
                        取消
                    </view>
                </view>
            </view>
        </l-popup>
    </view>
</template>

<script>
    import {
        orderIndex,
        shipmentCompleteSub,
        materialWareHousingCompleteSub,
        procurementCompleteSub,
        progressTimeCompleteSub,
        productionProgressCompleteSub,
        productionQualifiedCompleteSub,
        suppliesListCheckSubComplete,
        designer,
        goConfirmSubComplete
    } from '@/common/api/order.js'
    export default {
        data() {
            return {
                config: {
                    back: false,
                    title: '',
                    color: '#ffffff',
                    //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
                    backgroundColor: [1, ['#6970ff', '#6970ff']],
                    // 状态栏 ，数组则为滑动变色
                    statusBarBackground: ['', '#ffffff'],
                },
                list: [],
                // 分页参数
                page: 1, // 当前页码
                pageSize: 10, // 每页条数
                loading: false, // 是否正在加载中
                hasMore: true, // 是否还有更多数据
                estimated_completion_time: "",
                id: "",
                popshow: false,
                goConfirmshow: false,
                options: [{
                    value: 1,
                    name: '自产',
                    checked: true
                }, {
                    value: 2,
                    name: '第三方采购'
                }],
                product_production_type: 1,
                designerList: [],
                designer_id: "",
                designer_name: "",
                order_number: "",
                role_id: "",
                admin_id: ""

            }
        },
        onShow() {
            this.orderList()
            this.role_id = uni.getStorageSync("role_id") ? uni.getStorageSync("role_id") : ""
            this.admin_id = uni.getStorageSync("admin_id") ? uni.getStorageSync("admin_id") : ""
        },
        // 监听页面滚动到底部
        onReachBottom() {
            // 如果正在加载中，或者没有更多数据了，则不执行加载
            if (this.loading || !this.hasMore) return;
            // 加载下一页数据
            this.page++;
            this.orderList();
        },
        methods: {
            handleSearch() {
                this.page = 1;
                this.hasMore = true;
                this.orderList()
            },
            onSelectedChange(e) {
                this.designer_id = this.designerList[e.detail.value].id;
                this.designer_name = this.designerList[e.detail.value].name;
            },
            designerLists() {
                designer({
                    type: 1
                }).then((res) => {

                    this.designerList = res;

                }).catch((err) => {

                });
            },
            radioChange(evt) {
                this.product_production_type = evt.detail.value;
            },
            goConfirm(id) {
                this.designerLists()
                this.id = id
                this.goConfirmshow = true
            },
            goConfirmSubClose() {
                this.designer_id = "";
                this.product_production_type = 1;
                this.goConfirmshow = false
            },
            popshowShow(id) {
                this.id = id
                this.popshow = true;
            },
            popshowClose() {
                this.popshow = false;
                this.estimated_completion_time = ""
            },
            bindDateChange(e) {
                this.estimated_completion_time = e.detail.value
            },
            goConfirmSub(id) {
                let _this = this;
                if (!_this.designer_id) {
                    uni.showToast({
                        title: '请选择设计人员',
                        icon: 'none'
                    });
                    return;
                }
                uni.showModal({
                    title: "提示",
                    content: "完成该订单资料确认？",
                    showCancel: false,
                    success() {
                        goConfirmSubComplete({
                            id: _this.id,
                            designer_id: _this.designer_id,
                            product_production_type: _this.product_production_type
                        }).then((res) => {
                            // 显示操作成功提示
                            uni.showToast({
                                title: '操作成功',
                                icon: 'success',
                                duration: 1000
                            });
                            _this.designer_id = "";
                            _this.product_production_type = 0;
                            // 重置分页参数并重新加载数据
                            _this.page = 1; // 重置为第一页
                            _this.hasMore = true; // 重置是否有更多数据的状态
                            _this.goConfirmshow = false
                            _this.orderList(); // 重新调用列表接口获取最新数据
                        }).catch((err) => {

                        });
                    },
                });
            },
            suppliesListCheckSub(id) {
                let _this = this;
                uni.showModal({
                    title: "提示",
                    content: "确定该订单复审完成？",
                    showCancel: false,
                    success() {
                        suppliesListCheckSubComplete({
                            id: id
                        }).then((res) => {
                            // 显示操作成功提示
                            uni.showToast({
                                title: '操作成功',
                                icon: 'success',
                                duration: 1000
                            });
                            // 重置分页参数并重新加载数据
                            _this.page = 1; // 重置为第一页
                            _this.hasMore = true; // 重置是否有更多数据的状态
                            _this.orderList(); // 重新调用列表接口获取最新数据
                        }).catch((err) => {

                        });
                    },
                });
            },
            productionQualifiedComplete(id) {
                let _this = this;
                uni.showModal({
                    title: "提示",
                    content: "确定该订单质检资料已全部提交？",
                    showCancel: false,
                    success() {
                        productionQualifiedCompleteSub({
                            id: id
                        }).then((res) => {
                            // 显示操作成功提示
                            uni.showToast({
                                title: '操作成功',
                                icon: 'success',
                                duration: 1000
                            });
                            // 重置分页参数并重新加载数据
                            _this.page = 1; // 重置为第一页
                            _this.hasMore = true; // 重置是否有更多数据的状态
                            _this.orderList(); // 重新调用列表接口获取最新数据
                        }).catch((err) => {

                        });
                    },
                });
            },
            productionProgressComplete(id) {
                let _this = this;
                uni.showModal({
                    title: "提示",
                    content: "确定该订单生产资料已全部提交？",
                    showCancel: false,
                    success() {
                        productionProgressCompleteSub({
                            id: id
                        }).then((res) => {
                            // 显示操作成功提示
                            uni.showToast({
                                title: '操作成功',
                                icon: 'success',
                                duration: 1000
                            });
                            // 重置分页参数并重新加载数据
                            _this.page = 1; // 重置为第一页
                            _this.hasMore = true; // 重置是否有更多数据的状态
                            _this.orderList(); // 重新调用列表接口获取最新数据
                        }).catch((err) => {

                        });
                    },
                });
            },
            progressTimeComplete() {
                let _this = this;
                if (!_this.estimated_completion_time) {
                    uni.showToast({
                        title: '请选择完成时间',
                        icon: 'none'
                    });
                    return;
                }
                uni.showModal({
                    title: "提示",
                    content: "确定提交预计完成时间？",
                    showCancel: false,
                    success() {
                        progressTimeCompleteSub({
                            id: _this.id,
                            estimated_completion_time: _this.estimated_completion_time
                        }).then((res) => {
                            // 显示操作成功提示
                            uni.showToast({
                                title: '预计完成时间提交成功',
                                icon: 'success',
                                duration: 1000
                            });
                            _this.estimated_completion_time = "";
                            _this.popshow = false;
                            _this.page = 1; // 重置为第一页
                            _this.hasMore = true; // 重置是否有更多数据的状态
                            _this.orderList(); // 重新调用列表接口获取最新数据

                        }).catch((err) => {

                        });
                    },
                });
            },
            procurementComplete(id) {
                let _this = this;
                uni.showModal({
                    title: "提示",
                    content: "确定该订单采购资料已全部提交？",
                    showCancel: false,
                    success() {
                        procurementCompleteSub({
                            id: id
                        }).then((res) => {
                            // 显示操作成功提示
                            uni.showToast({
                                title: '采购完成操作成功',
                                icon: 'success',
                                duration: 1000
                            });
                            // 重置分页参数并重新加载数据
                            _this.page = 1; // 重置为第一页
                            _this.hasMore = true; // 重置是否有更多数据的状态
                            _this.orderList(); // 重新调用列表接口获取最新数据
                        }).catch((err) => {

                        });
                    },
                });
            },
            shipmentComplete(id) {
                let _this = this;
                uni.showModal({
                    title: "提示",
                    content: "确定该订单已全部发货？",
                    showCancel: false,
                    success() {
                        shipmentCompleteSub({
                            id: id
                        }).then((res) => {
                            // 显示操作成功提示
                            uni.showToast({
                                title: '发货完成操作成功',
                                icon: 'success',
                                duration: 1000
                            });
                            // 重置分页参数并重新加载数据
                            _this.page = 1; // 重置为第一页
                            _this.hasMore = true; // 重置是否有更多数据的状态
                            _this.orderList(); // 重新调用列表接口获取最新数据
                        }).catch((err) => {

                        });
                    },
                });
            },
            materialWareHousingComplete(id) {
                let _this = this;
                uni.showModal({
                    title: "提示",
                    content: "确定该订单物料已全部入库？",
                    showCancel: false,
                    success() {
                        materialWareHousingCompleteSub({
                            id: id
                        }).then((res) => {
                            // 显示操作成功提示
                            uni.showToast({
                                title: '物料入库完成操作成功',
                                icon: 'success',
                                duration: 1000
                            });
                            // 重置分页参数并重新加载数据
                            _this.page = 1; // 重置为第一页
                            _this.hasMore = true; // 重置是否有更多数据的状态
                            _this.orderList(); // 重新调用列表接口获取最新数据
                        }).catch((err) => {

                        });
                    },
                });
            },

            orderList() {
                // 标记为加载 中
                this.loading = true;
                // 传递分页参数到接口
                orderIndex({
                    page: this.page,
                    limit: this.pageSize,
                    order_number: this.order_number
                }).then((res) => {
                    const orderlist = res.data;
                    this.loading = false;
                    // 如果是第一页，直接赋值
                    if (this.page === 1) {
                        this.list = orderlist;
                    } else {
                        // 如果是后续页，追加数据
                        this.list = [...this.list, ...orderlist];
                    }

                    // 判断是否还有更多数据
                    // 如果返回的数据少于每页条数，说明没有更多数据了
                    if (orderlist.length < this.pageSize) {
                        this.hasMore = false;
                    }
                }).catch((err) => {
                    this.loading = false;
                    console.error('失败', err);
                    // 加载失败时，页码回退
                    if (this.page > 1) {
                        this.page--;
                    }
                });
            },
            getStatusText(status) {
                const statusMap = {
                    1: '技术经理确认',
                    2: '设计提交物资清单',
                    3: '设计复审',
                    4: '物资采购',
                    5: '物料入库',
                    6: '物料入库，准备生产',
                    7: '生产中',
                    8: '质检中',
                    9: '已质检，发货中',
                    10: '已发货，待回单',
                    11: '发货完成'
                };
                return statusMap[status];
            },
            orderDetail(id) {
                uni.navigateTo({
                    url: "/pages/index/detail?id=" + id,
                })
            },
            clickView(id, type) {
                uni.navigateTo({
                    url: "/pages/index/product?id=" + id + "&type=" + type,
                })
            },
            shipmentReceiptView(id) {
                uni.navigateTo({
                    url: "/pages/index/shipmentReceipt?id=" + id,
                })
            },
            addorder() {
                uni.navigateTo({
                    url: "/pages/index/addorder",
                })
            },
            editOrder(id) {
                uni.navigateTo({
                    url: "/pages/index/editorder?id=" + id,
                })
            },
            editOrderContract(id) {
                uni.navigateTo({
                    url: "/pages/index/editOrderContract?id=" + id,
                })
            },
        }
    }
</script>

<style>
    page {
        background: #f5f5f5;
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .server-order {
        width: 100%;
        position: relative;
    }

    .server-order input {
        margin: 10rpx 20rpx;
        padding: 10rpx;
        font-size: 24rpx;
        background: #fff;
        border-radius: 10rpx;
    }

    .server-image {
        width: 60rpx;
        height: 60rpx;
        position: absolute;
        top: 15%;
        right: 30rpx;
        z-index: 999;
    }

    .order-add {
        position: fixed;
        left: 5%;
        bottom: 5%;
        width: 60rpx;
        height: 60rpx;
        border-radius: 60rpx;
        background: #00aaff;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 15rpx 8rpx rgba(0, 170, 255, 0.3);
    }

    .order-add image {
        width: 50rpx;
        height: 50rpx;
    }

    .list {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .nolist {
        width: auto;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .nolist image {
        width: 200rpx;
        height: 200rpx;
    }

    .list-box {
        background: #fff;
        margin: 10rpx 20rpx;
        display: flex;
        flex-direction: column;
        border-radius: 10rpx;
        padding: 20rpx;
    }

    .order-number {
        font-size: 22rpx;
    }

    .order-line {
        border-top: 1rpx solid #f5f5f5;
        margin: 15rpx 0;
    }

    .order-content {
        display: flex;
        justify-content: space-between;
        font-size: 20rpx;
    }

    .order-box {
        display: flex;
        flex-direction: column;
        width: 50%;
    }

    .order-box-cont {
        display: flex;
        margin-bottom: 15rpx;
    }

    .order-box-cont view:first-of-type {
        width: 30%;
    }

    .order-box-cont view:last-of-type {
        width: 60%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .order-option {
        display: flex;
        margin-top: 20rpx;
        justify-content: flex-end;
    }

    .order-btn {
        padding: 6rpx 30rpx;
        font-size: 20rpx;
        border: 1rpx solid #d5d5d5;
        border-radius: 30rpx;
        margin-left: 10rpx;
    }

    .order-btn-complete {
        color: #ffaa00;
        border-color: #ffaa00;
    }

    .order-btn-edit {
        color: #00aaff;
        border-color: #00aaff;
    }

    .order-btn-check {
        color: #aaaa00;
        border-color: #aaaa00;
    }

    /* 加载提示样式 */
    .loading,
    .no-more {
        text-align: center;
        padding: 20rpx 0;
        color: #999;
        font-size: 24rpx;
    }

    .popup-click {
        color: #ffaa00;
        border-color: #ffaa00;
        padding: 6rpx 30rpx;
        font-size: 24rpx;
        border: 1rpx solid #d5d5d5;
        margin-left: 10rpx;
    }

    .popup-close {
        color: #d5d5d5;
        border-color: #d5d5d5;
        padding: 6rpx 30rpx;
        font-size: 24rpx;
        border: 1rpx solid #d5d5d5;
        margin-left: 30rpx;
    }

    .pop-box {
        width: 90%;
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 80rpx;
    }
</style>